<template>
  <div class="orderdetail">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="back" @click="goBack">←返回</div>
      <div class="row">
        <div>设备名称: {{ form.deviceName }}</div>
        <div>
          <el-row>
            <el-col :span="2">
              <div class="yd"></div>
            </el-col>
            <el-col :span="12">
              {{
                form.deviceStatus == '1'
                  ? '使用中'
                  : form.deviceStatus == '2'
                  ? '维修中'
                  : form.deviceStatus == '3'
                  ? '维保中'
                  : form.deviceStatus == '4'
                  ? '点检中'
                  : ''
              }}
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="row">
        <div>设备型号: {{ form.deviceModelName }}</div>
        <div>设备编号: {{ form.deviceNum }}</div>
      </div>
      <div v-if="form.repairStatus == '4' || form.repairStatus == '9'">
        <div class="title">
          <el-icon> <WarningFilled /> </el-icon>关闭报修信息
        </div>
        <div class="row">
          <div style="width: 50%">关闭维修原因: {{ form.closeReason }}</div>
        </div>
        <div class="row" v-if="closePictures[0] != ''">
          <div>
            相关照片:
            <div style="display: flex">
              <div v-for="(item, index) in closeList">
                <el-image
                  style="width: 94px; height: 84px; padding: 0 5px"
                  :src="item"
                  :zoom-rate="1.2"
                  :preview-src-list="closeList"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
              <div v-for="(item, index) in closeVedioList">
                <video
                  :src="item"
                  class="avatar"
                  controls="controls"
                  style="width: 94px; height: 84px; padding: 0 5px"
                  @play="handleFullScreen"
                ></video>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div>提交人: {{ form.repairUserName }}</div>
          <div>提交时间: {{ form.closeTime }}</div>
        </div>
      </div>
      <el-divider />
      <div v-if="form.repairType == 1">
        <div class="title">报修信息</div>
        <div class="row">
          <!-- <div>故障描述: {{ form.description }}</div> -->
          <div>报修人: {{ form.createUserName }}</div>
          <div>故障报修时间: {{ form.createTime }}</div>
        </div>
        <div class="row">
          <div style="width: 50%">故障描述: {{ form.description }}</div>
        </div>
        <div class="row">
          <div v-if="failurePictures.length != 0">
            故障照片:
            <div style="display: flex" v-if="failurePictures[0] != ''">
              <div v-for="(item, index) in failureList">
                <el-image
                  style="width: 94px; height: 84px; padding: 0 5px"
                  :src="item"
                  :zoom-rate="1.2"
                  :preview-src-list="failureList"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
              <div v-for="(item, index) in failureVedioList">
                <video
                  :src="item"
                  class="avatar"
                  controls="controls"
                  style="width: 94px; height: 84px; padding: 0 5px"
                  @play="handleFullScreen"
                ></video>
              </div>
            </div>
          </div>
        </div>
        <el-divider />
      </div>
      <div class="title">故障信息</div>
      <div class="row">
        <div>故障等级: {{ form.failureLevel }}</div>
        <div>故障类型: {{ form.failureCategory }}</div>
        <div>故障现象: {{ form.failurePhenomenon }}</div>
      </div>
      <div class="row" v-if="form.repairType == 2">
        <div style="width: 50%">故障描述: {{ form.description }}</div>
      </div>
      <div class="row">
        <div style="width: 50%">解决方案: {{ form.solution }}</div>
      </div>
      <el-divider />
      <div class="title">维修信息</div>
      <div class="row">
        <div>
          维修工单号: {{ form.repairOrderNum }}
          <span class="click" @click="copyText">复制</span>
        </div>
        <div>
          维修类型: {{ form.repairType == 1 ? '内部维修' : '委外维修' }}
        </div>
        <div>
          维修状态:
          {{
            form.repairStatus == 1
              ? '待维修'
              : form.repairStatus == 2
              ? '维修中'
              : form.repairStatus == 3
              ? '待验证'
              : form.repairStatus == 4
              ? '关闭-待验证'
              : form.repairStatus == 5
              ? '维修完成'
              : '维修关闭'
          }}
        </div>
      </div>
      <div class="row">
        <div>维修人: {{ form.repairUserName }}</div>
        <div v-if="form.repairStatus != 1 && form.repairType == 2">
          维修费用: {{ form.outsourceFee == '' ? 0 : form.outsourceFee }}元
        </div>
        <div v-if="form.repairStatus != 1 && form.repairType == 2">
          维修厂家: {{ form.repairFactory }}
        </div>
      </div>
      <div class="row">
        <div style="width: 50%">维修内容: {{ form.content }}</div>
      </div>
      <div class="row">
        <div>维修开始时间: {{ form.startTime }}</div>
        <div>维修结束时间: {{ form.endTime }}</div>
      </div>
      <div style="padding-left: 10px">
        维修备件列表:
        <el-table
          :data="form.partList"
          style="width: 55%"
          border
          :show-summary="form.repairStatus == 3 || form.repairStatus == 4"
        >
          <el-table-column prop="partNum" label="备件编号" width="180" />
          <el-table-column prop="partName" label="备件名称" width="180" />
          <el-table-column prop="partTypeName" label="备件类型" />
          <el-table-column prop="totalAmount" label="使用数量" />
          <el-table-column
            prop="totalMoney"
            label="备件总价值/元"
            v-if="
              form.repairStatus == 3 ||
              form.repairStatus == 4 ||
              form.repairStatus == 5
            "
          />
          <el-table-column prop="approveStatus" label="审核状态" v-else>
            <template #default="scope">
              <div v-if="scope.row.approveStatus != 2">
                {{
                  scope.row.approveStatus == 1
                    ? '待审核'
                    : scope.row.approveStatus == 3
                    ? '审核通过'
                    : ''
                }}
              </div>
              <div v-else>
                <span>不通过</span>
                <el-popover
                  placement="top-start"
                  title="原因"
                  :width="200"
                  trigger="hover"
                  :content="scope.row.reason"
                >
                  <template #reference>
                    <svg
                      t="1681107624752"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="3558"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M976.738462 704.984615c27.569231-63.015385 39.384615-129.969231 39.384615-196.923077s-11.815385-133.907692-39.384615-196.923076S913.723077 196.923077 866.461538 149.661538c-47.261538-47.261538-102.4-82.707692-161.476923-110.276923-63.015385-27.569231-129.969231-39.384615-196.923077-39.384615s-133.907692 11.815385-196.923076 39.384615S196.923077 102.4 149.661538 149.661538 66.953846 248.123077 39.384615 311.138462c-27.569231 63.015385-39.384615 129.969231-39.384615 196.923076s11.815385 133.907692 39.384615 196.923077c27.569231 59.076923 63.015385 114.215385 110.276923 161.476923 47.261538 47.261538 102.4 82.707692 161.476924 110.276924 63.015385 27.569231 129.969231 39.384615 196.923076 39.384615s133.907692-11.815385 196.923077-39.384615c59.076923-27.569231 114.215385-63.015385 161.476923-110.276924 47.261538-47.261538 82.707692-98.461538 110.276924-161.476923z m-31.507693-196.923077c0 59.076923-11.815385 114.215385-35.446154 169.353847-23.630769 51.2-55.138462 98.461538-94.523077 137.846153s-86.646154 70.892308-137.846153 94.523077c-55.138462 23.630769-110.276923 35.446154-169.353847 35.446154s-114.215385-11.815385-169.353846-35.446154c-51.2-23.630769-98.461538-55.138462-137.846154-94.523077s-70.892308-86.646154-94.523076-137.846153c-23.630769-55.138462-35.446154-110.276923-35.446154-169.353847s11.815385-114.215385 35.446154-169.353846C126.030769 283.569231 157.538462 240.246154 200.861538 196.923077c39.384615-39.384615 86.646154-70.892308 137.846154-94.523077 55.138462-23.630769 110.276923-35.446154 169.353846-35.446154s114.215385 11.815385 169.353847 35.446154c55.138462 23.630769 98.461538 55.138462 141.784615 94.523077 39.384615 39.384615 70.892308 86.646154 94.523077 137.846154 19.692308 59.076923 31.507692 114.215385 31.507692 173.292307z"
                        fill="#C2C2C2"
                        p-id="3559"
                      ></path>
                      <path
                        d="M508.061538 153.6c-47.261538 0-90.584615 39.384615-90.584615 90.584615s39.384615 90.584615 90.584615 90.584616 90.584615-39.384615 90.584616-90.584616-43.323077-90.584615-90.584616-90.584615zM464.738462 823.138462c3.938462 7.876923 3.938462 11.815385 11.815384 15.753846 3.938462 3.938462 7.876923 7.876923 15.753846 11.815384 7.876923 3.938462 11.815385 3.938462 19.692308 3.938462h7.876923c3.938462 0 7.876923 0 7.876923-3.938462 3.938462 0 3.938462-3.938462 7.876923-3.938461 3.938462-3.938462 3.938462-3.938462 7.876923-3.938462 0-3.938462 3.938462-3.938462 3.938462-7.876923s3.938462-3.938462 3.938461-7.876923 3.938462-3.938462 3.938462-7.876923v-7.876923h-47.261539 47.261539v-354.461539-7.876923c0-3.938462 0-7.876923-3.938462-7.876923 0-3.938462-3.938462-3.938462-3.938461-7.876923s-3.938462-3.938462-3.938462-7.876923c-3.938462 0-3.938462-3.938462-7.876923-3.938461s-3.938462-3.938462-7.876923-3.938462-3.938462-3.938462-7.876923-3.938461H512h-7.876923c-3.938462 0-7.876923 0-7.876923 3.938461-3.938462 0-3.938462 3.938462-7.876923 3.938462-3.938462 3.938462-3.938462 3.938462-7.876923 3.938461 0 3.938462-3.938462 3.938462-3.938462 7.876923s-3.938462 3.938462-3.938461 7.876923-3.938462 7.876923-3.938462 7.876923v7.876923h47.261539-47.261539v354.461539c-7.876923 0-7.876923 3.938462-3.938461 11.815385z"
                        fill="#C2C2C2"
                        p-id="3560"
                      ></path>
                    </svg>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="row">
        <div v-if="form.repairStatus != 1 && repairPictures[0] != ''">
          维修照片:
          <div style="display: flex">
            <div v-for="(item, index) in repairList">
              <el-image
                style="width: 84px; height: 84px; margin-right: 10px"
                :src="item"
                :zoom-rate="1.2"
                :preview-src-list="repairList"
                :initial-index="index"
                fit="cover"
              />
            </div>
            <div v-for="(item, index) in repairVedioList">
              <video
                :src="item"
                class="avatar"
                controls="controls"
                style="width: 84px; height: 84px; margin-right: 10px"
                @play="handleFullScreen"
              ></video>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div v-if="form.repairStatus != 1 && form.repairType == 2">
          <div>附件:</div>
          <div class="fileList">
            <div v-for="item in fileList" class="fileBox">
              <div class="fileItem">
                <div style="display: flex; line-height: 40px">
                  <img
                    v-if="item.suffix == '.doc' || item.suffix == '.docx'"
                    style="width: 40px; height: 40px"
                    src="../../assets/doc.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.xls' || item.suffix == '.xlsx'"
                    style="width: 40px; height: 40px"
                    src="../../assets/xls.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.png' || item.suffix == '.jpg'"
                    style="width: 40px; height: 40px"
                    src="../../assets/png.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.ppt'"
                    style="width: 40px; height: 40px"
                    src="../../assets/ppt.png"
                    alt=""
                  />
                  <img
                    v-else-if="item.suffix == '.pdf'"
                    style="width: 40px; height: 40px"
                    src="../../assets/PDF.png"
                    alt=""
                  />
                  <img
                    v-else
                    style="width: 40px; height: 40px"
                    src="../../assets/other.png"
                    alt=""
                  />
                  <div class="filename">{{ item.name + item.suffix }}</div>
                </div>
                <div
                  style="
                    color: var(--el-color-primary);
                    cursor: pointer;
                    line-height: 40px;
                  "
                  @click="xiazai(item.name, item.url, item.suffix)"
                >
                  下载
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="row"
        v-if="
          (form.repairStatus != 1 && form.repairStatus != 2) ||
          form.verifyStatus == 2
        "
      >
        <div>
          维修验证提交时间:
          {{ form.verifySubmitTime }}
        </div>
      </div>
      <el-divider />
      <div
        v-if="
          type == 'detail' ||
          type == 'verify' ||
          (type == 'task' && form.repairStatus == 5) ||
          (type == 'record' && form.repairStatus == 5)
        "
      >
        <div class="title">验证信息</div>
        <div class="row">
          <div>
            验证结果:
            {{
              form.verifyStatus == 1
                ? '通过'
                : form.verifyStatus == 2
                ? '不通过'
                : ''
            }}
          </div>
          <div>验证人: {{ form.verifyUserName }}</div>
          <div>
            验证提交时间:
            <span
              v-if="
                form.verifyStatus == 1 ||
                form.verifyStatus == 2 ||
                form.repairStatus == 2
              "
              >{{ form.verifyTime }}</span
            >
          </div>
        </div>
        <div class="row" v-if="form.verifyStatus == 2">
          不通过原因：{{ form.verifyReason }}
        </div>
      </div>
      <div
        v-if="
          (type == 'verify' &&
            (form.repairStatus == 3 || form.repairStatus == 4)) ||
          (from == 'msg' && (form.repairStatus == 3 || form.repairStatus == 4))
        "
      >
        <el-button @click="goBack()">返回</el-button>
        <el-button type="primary" @click="verifySubmit()"> 验证 </el-button>
      </div>
    </el-card>
    <el-dialog
      v-model="verifyVisible"
      title="维修验证"
      :show-close="false"
      width="35%"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
        <el-form-item label="验证结果" prop="verifyStatus">
          <el-radio-group v-model="ruleForm.verifyStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.verifyStatus == 2"
          label="不通过原因"
          prop="verifyReason"
        >
          <el-input
            v-model="ruleForm.verifyReason"
            type="textarea"
            placeholder="输入原因"
            row="4"
          ></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-button @click="cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">
            确定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import routes from '/@/router'
import { useRoute } from 'vue-router'
import {
  repairDetailApi,
  repairDetailByOrderNumApi,
  verifyRepairApi
} from '/@/api/repair'
import useClipboard from 'vue-clipboard3'
import {
  ElMessage,
  FormInstance,
  FormRules,
  TableColumnCtx
} from 'element-plus'
import { WarningFilled } from '@element-plus/icons-vue'
import { bindFileUrlByFileNameApi } from '/@/api/publicApi'
import { downloadFileApi } from '/@/api/knowledge'
const { toClipboard } = useClipboard()
const route = useRoute()
const id = ref(JSON.parse(JSON.stringify(route.query.id)))
const type = ref(JSON.parse(JSON.stringify(route.query.type)))
const from = ref(route.query.from ? route.query.from : '1')
const failurePictures = ref<any>([])
const repairPictures = ref<any>([])
const closePictures = ref<any>([])
const failureList = ref<any>([])
const failureVedioList = ref<any>([])
const closeList = ref<any>([])
const closeVedioList = ref<any>([])
const repairList = ref<any>([])
const repairVedioList = ref<any>([])
const verifyVisible = ref<any>(false)
const fileList = ref<any>([])
const form = ref<any>({})
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({
  verifyStatus: '',
  verifyReason: '',
  id: ''
})

const rules = reactive<FormRules>({
  verifyStatus: [
    { required: true, message: '请选择验证结果', trigger: 'change' }
  ],
  verifyReason: [
    { required: true, message: '请输入不通过原因', trigger: 'blur' }
  ]
})
const getDetail = () => {
  if (type.value == 'task' || type.value == 'record') {
    repairDetailByOrderNumApi(id.value).then((res) => {
      if (res.code == 0) {
        form.value = res.data
        failurePictures.value = form.value.failurePictures.split(',')
        repairPictures.value = form.value.repairPictures.split(',')
        closePictures.value = form.value.closePictures.split(',')
        let arr = form.value.closePictures.split(',')
        arr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            closeList.value.push(item)
          } else {
            closeVedioList.value.push(item)
          }
        })
        let brr = form.value.failurePictures.split(',')
        brr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            failureList.value.push(item)
          } else {
            failureVedioList.value.push(item)
          }
        })
        let crr = form.value.repairPictures.split(',')
        crr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            repairList.value.push(item)
          } else {
            repairVedioList.value.push(item)
          }
        })
        if (form.value.fileUrls != '') {
          let fileNames = form.value.fileNames.split(',')
          let fileUrls = form.value.fileUrls.split(',')
          fileNames.forEach((i: any, index: any) => {
            let str = fileUrls[index].substring(
              fileUrls[index].indexOf('.'),
              fileUrls[index].indexOf('.') + 4
            )
            fileList.value.push({
              name: i,
              suffix: str,
              url: fileUrls[index]
            })
          })
        }
      }
    })
  } else {
    repairDetailApi(id.value).then((res) => {
      if (res.code == 0) {
        form.value = res.data
        failurePictures.value = form.value.failurePictures.split(',')
        repairPictures.value = form.value.repairPictures.split(',')
        closePictures.value = form.value.closePictures.split(',')
        let arr = form.value.closePictures.split(',')
        arr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            closeList.value.push(item)
          } else {
            closeVedioList.value.push(item)
          }
        })
        let brr = form.value.failurePictures.split(',')
        brr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            failureList.value.push(item)
          } else {
            failureVedioList.value.push(item)
          }
        })
        let crr = form.value.repairPictures.split(',')
        crr.forEach((item: any) => {
          let a = item.lastIndexOf('\?')
          let str = item.substring(a - 3, a)
          if (str == 'png' || str == 'jpg' || str == 'peg') {
            repairList.value.push(item)
          } else {
            repairVedioList.value.push(item)
          }
        })
        if (form.value.fileUrls != '') {
          let fileNames = form.value.fileNames.split(',')
          let fileUrls = form.value.fileUrls.split(',')
          fileNames.forEach((i: any, index: any) => {
            let str = fileUrls[index].substring(
              fileUrls[index].indexOf('.'),
              fileUrls[index].indexOf('.') + 4
            )
            fileList.value.push({
              name: i,
              suffix: str,
              url: fileUrls[index]
            })
          })
        }
      }
    })
  }
}
getDetail()

const handleFullScreen = (e: any) => {
  launchFullscreen(e.target)
}

const launchFullscreen = (element: any) => {
  //此方法不可以在異步任務中執行，否則火狐無法全屏
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.oRequestFullscreen) {
    element.oRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  } else {
    var docHtml = document.documentElement
    var docBody = document.body
    var videobox = element
    var cssText = 'width:100%;height:100%;overflow:hidden;'
    docHtml.style.cssText = cssText
    docBody.style.cssText = cssText
    videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'
    document.IsFullScreen = true
  }
}

const copyText = async () => {
  try {
    if (form.value.repairOrderNum == '') {
      ElMessage({
        type: 'warning',
        message: '暂无内容'
      })
    } else {
      await toClipboard(form.value.repairOrderNum)
      ElMessage({
        type: 'success',
        message: '复制成功'
      })
    }
  } catch (e) {
    console.error(e)
  }
}

const verifySubmit = () => {
  verifyVisible.value = !verifyVisible.value
}

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  verifyVisible.value = !verifyVisible.value
}

const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.value.id = id.value
      verifyRepairApi(ruleForm.value).then((res) => {
        if (res.code == 0) {
          ElMessage.success('验证完成')
          if (ruleForm.value.verifyStatus == '1') {
            from.value = '2'
          } else {
            from.value = '1'
          }
          cancel(formEl)
          goBack()
        }
      })
    }
  })
}

const goBack = () => {
  if (type.value == 'task' || type.value == 'verify') {
    routes.go(-1)
  } else if (type.value == 'record') {
    routes.push({
      name: 'recordList',
      query: {
        active: from.value == '1' ? '1' : '2'
      }
    })
  } else {
    if (from.value == '1') {
      routes.push({
        name: 'repairOrder',
        query: {
          active: '1'
        }
      })
    } else if (from.value == 'msg') {
      routes.push({
        name: 'messagecenter'
      })
    } else if (from.value == '2') {
      routes.push({
        name: 'repairOrder',
        query: {
          active: '2'
        }
      })
    }
  }
}

const xiazai = (name: any, url: any, suffix: any) => {
  downloadFileApi(url).then(async (r: any) => {
    let blob = new Blob([r])
    let url = window.URL.createObjectURL(blob)
    const link = document.createElement('a') // 创建a标签
    link.download = name + '.' + suffix
    link.href = url
    console.log(url)
    link.click()
    URL.revokeObjectURL(url) // 释放内存
  })
}
</script>
<style scoped lang="scss">
.orderdetail {
  font-size: var(--el-font-size-base);

  .back {
    cursor: pointer;
    color: rgba(140, 140, 140, 1);
  }

  .row {
    display: flex;
    margin: 15px 0px;
    padding-left: 10px;

    > div {
      width: 350px;
      min-width: 300px;
      margin-right: 50px;
      line-height: 30px;

      .click {
        color: var(--el-color-primary);
        cursor: pointer;
      }

      .photo {
        text-decoration: underline;
      }
    }
  }

  .title {
    font-size: 16px;
    font-weight: 600;
  }
}

.yd {
  width: 10px;
  height: 10px;
  background: rgb(255, 0, 0);
  border-radius: 5px;
  display: flex;
  margin: 10px auto;
}

.fileList {
  width: 600px !important;
  display: flex;
  flex-flow: row wrap;

  .fileBox {
    width: 48%;
    background: #f2f2f2ff;
    margin: 2px;
    padding: 5px;

    .fileItem {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
.filename {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
}
</style>
